<template>
    <div id="home">
        <div style="position: fixed;z-index: 1;width: 100%;">
            <NavBar class="home-nav">
                <template v-slot:center><div>购物市场</div></template>
                <template v-slot:left>
                    <el-cascader
                            expand-trigger="hover"
                            :options="options"
                            :placeholder='fwq.toString()'
                            v-model="fwq"
                            @change="handleChange">
                    </el-cascader>
                </template>
            </NavBar>
            <div class="searchbar">
                <el-input v-model="search" placeholder="请输入关键字" style="width: 80%" clearable/>
                <el-button type="primary" style="margin-left: 5px;" @click="Search()">查询</el-button>
            </div>
        </div>
        <div style="height: 80px;width: 98%"></div>
        <div class="box" v-for="item in goodsData">
            <div class="item" @click="lookup(item)">
<!--                <div style="width: 60px"><img :src="item.img" style="width: 50px"/></div>-->
                <div style="flex: 1"><h3>{{item.name}}</h3><div style="min-height:20px">{{item.property}}</div></div>
                <div style="width: 70px">价格：{{item.price}}</div>
                <div style="width: 50px">{{item.priceUnit}}</div>
            </div>
        </div>
        <div style="height: 80px;width: 98%"><div ref="loadmore">加载更多</div></div>
    </div>
        <el-dialog v-model="$store.state.dialogVisible" title="站长提示" width="90%">
            <div>
                <h3>1.请勿上架不存在的商品，且物品出售后及时删除。</h3>
                <span>2.反馈与交流qq群：<span style="color: red">218200811</span></span>
<!--                <h3>制作不易，感谢打赏</h3>-->
<!--                <img style="width: 200px;height:auto" src="../../assets/img/169.png">-->
            </div>
        <el-button type="primary" @click="$store.state.dialogVisible = false">确认</el-button>
    </el-dialog>
</template>
<script>
    import NavBar from "../../components/common/navbar/NavBar";
    import request from "../../network/request";
    import HomeNavBar from "../../components/content/HomeNavBar";
    import fwqOptions from "../../assets/js/fwq";
    export default {
        name: "HomeView",
        components:{
            HomeNavBar,
            NavBar
        },
        data(){
            return{
                fwq:'无尽之海',
                currentPage:1,
                pageSize:15,
                search:'',
                goodsData:[],
                options:fwqOptions,
                user:JSON.parse(sessionStorage.getItem("user")),
            }
        },
        created(){
            if (this.user){
                this.fwq = this.user.fwq
            }
            this.load()
        },
        mounted() {
            var timer = null;
            const winHeight = document.documentElement.clientHeight;
            window.addEventListener("scroll", () =>{
                if (timer){
                    clearTimeout(timer)
                }
                timer = setTimeout(()=>{
                    if (winHeight > this.$refs.loadmore.getBoundingClientRect().top){
                        this.pageSize +=30
                        this.load()
                    }
                },300)
            },true)
        },
        methods:{
            handleChange(){
                this.load()
            },
            Search(){
                this.SearchKeyWord = this.search
                this.$router.push({
                    path:'/searchYm',
                    query: {
                        data: this.SearchKeyWord,
                        fwq:this.fwq
                    }
                })
            },
            load(){
                request.get("/goods/fwqClazz",{
                    params:{
                        pageNum:this.currentPage,
                        pageSize:this.pageSize,
                        search:this.fwq.toString(),
                    }
                }).then(res => {
                    this.goodsData = res.data.records
                })
            },
            lookup(item){
                this.$router.push({
                        path:'/goodsDetails',
                        query: {
                            data: [item.name,
                                item.price,
                                item.img,
                                item.fwq,
                                item.address,
                                item.priceUnit,
                                item.number,
                                item.author,
                                item.property,
                                item.bsProperty]
                        }
                    }
                )
            }
        }
    }
</script>

<style scoped>
    #home{
        width: 100%;
    }
    .home-nav{
        background-color: var(--color-tint);
        color: white;
    }
    .box{
        display: flex;
    }
    .item{
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex: 1;
        margin-top: 10px;
        background-color: #f6f6f6;
    }
    .searchbar{
        display: flex;
        /*justify-content: space-around;*/
        align-items: center;    /*内容上下居中*/
        height: 40px;
        background-color: white;
        box-shadow: 0 1px 1px rgba(100,100,100,.1);
    }
</style>

